<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="#">角色管理</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-button @click="add" type="primary" plain size="small">添加</el-button>
        <v-list @edit="edit"></v-list>
        <v-dialog @cancel="cancel" ref="dialogInfo" :addInfo="addInfo"></v-dialog>
    </div>
</template>

<script setup lang="ts">
import vList from './list.vue';
import vDialog from './dialog.vue';
import { reactive,ref } from 'vue';
let addInfo = reactive({
  isShow : false,
  isAdd : true,
});
let dialogInfo = ref()
let add=()=>{
  addInfo.isShow = true,
  addInfo.isAdd = true
}
let cancel = (e:any):void=>{
  addInfo.isShow = e
}
let edit = (e:any):void=>{
  addInfo.isShow = true;
  addInfo.isAdd = false;
  dialogInfo.value.lookup(e)
}
</script>

<style scoped>
.el-button{
    margin: 10px 5px;
}
</style>